<template>
  <div>
    <el-form
      :model="loginForm"
      ref="ruleForm"
      class="login-form"
      :rules="rules"
    >
      <!-- 账号 -->
      <el-form-item prop="account">
        <el-input
          v-model="loginForm.account"
          prefix-icon="iconfont icon-user"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          prefix-icon="iconfont icon-lock"
          autocomplete="off"
          :type="type"
        >
          <i
            class="iconfont"
            :class="type === 'password' ? 'icon-eyeclose' : 'icon-eyeopen'"
            slot="suffix"
            @click="handleIcon"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="submitForm('ruleForm')"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { checkLogin } from "@/api/user";

// 引入localstorge封装函数
import local from '@/utils/local';

// 引入计算动态路由函数
import {calcDynamicRoutes} from '@/router'

export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
      },
      type: "password",
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(ref) {
      //做登录表单时验证
      this.$refs[ref].validate(async (valid) => {
        if (valid) {
          // 发送登录请求

          // // 第一种接收响应数据的写法
          // checkLogin(this.loginForm)
          // .then(res => {
          //   let {code, msg, role, token} = res.data;
          //   console.log(code, msg, role, token)

          //   if (code === 0) {
          //     this.$router.push('/home');
          //   }
          // })
          // .catch(err => {
          //   console.log(err)
          // })

          try {
            // 第二种接收响应数据的写法
            let res = await checkLogin(this.loginForm);
            let {code, msg, role, token} = res.data;

            if (code === 0) {
              // 存入token
              local.set('token', token);

              // 存入用户角色到本地
              local.set('role', role);
              calcDynamicRoutes()
              
              this.$router.push('/home')
            }
          } catch (err) {
            this.$message.error(err.message)
          }

        } else {
          return;
        }
      });
    },

    // 切换密码框type值
    handleIcon() {
      //当点击的时候切换眼睛
      this.type === "password"
        ? (this.type = "text")
        : (this.type = "password");
    },
  },
};
</script>

<style lang="less" scoped>
.login-form {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;

  .el-button--warning {
    width: 100%;
  }

  /deep/ .el-input__inner {
    background: transparent;
    color: #000;
  }

  .icon-eyeopen {
    margin-right: 5px;
  }
}
</style>